<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机商品详情页</title>
    <!-- 引入网页头标 -->
    <link rel="shortcut icon" href="../images/favicon.ico">
     <!-- 引入初始化css -->
     <link rel="stylesheet" href="../css/public.css">
    <!-- 引入css -->
    <link rel="stylesheet" href="../css/shop.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/index-3.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <!-- 广告通栏 -->
    <div class="ggtl">
        <a href="#">
            <img src="../images/ggtl.jpg" alt="">
        </a>
        <i class="close">关闭广告</i>
    </div>
    <!-- 固定侧边电梯栏 -->
        <ul class="page-slider">
            <li calss="APP">
                <a href="">
                <img src="../images/phoneAPP.png" class="imgf" alt="">
                <img src="../images/phoneAPP2.png" class="imgf imgs" alt="">
                <span>手机APP</span>
                </a>
                <div class="rightpop">			
                    <img src="../images/download.PNG" alt="">
                    <p>扫码领取新人百元礼包</p>			
                </div>
            </li>
            <li>
                <a href="peop.html">
                <img  src="../images/user1.png" class="imgf" alt="">
                <img src="../images/user2.png" class="imgf imgs" alt="">
                <span>个人中心</span>
                </a>
            </li>
            <li>
                <a href="">
                <img src="../images/server1.png" class="imgf" alt="">
                <img src="../images/server2.png" class="imgf imgs" alt="">
                <span>售后服务</span>
                </a>	
            </li>
            <li>
                <a href="">
                <img src="../images/peop.png" class="imgf" alt="">
                <img src="../images/peop_hover.png" class="imgf imgs" alt="">
                <span>人工服务</span>
                </a>	
            </li>
            <li>
                <a href="">
                <img src="../images/car1.png" class="imgf" alt="">
                <img src="../images/car2.png" class="imgf imgs"alt="">
                <span>购物车</span>
                </a>
            </li>
            <li class="f-top">
                <a href="#f-top">
                <img src="../images/totop.png" class="imgf" alt="">
                <img src="../images/totop_hover.png" class="imgf imgs" alt="">
                <span>回顶部</span>
                </a>
            </li>
        </ul>
    <!-- 顶部通栏 -->
    <div class="nav-top" id="f-top">
        <div class="w">
            <div class="nav-l">
                <ul>
                    <li>
						<a href="gw.html"> 小米官网</a>
					</li>
					<li>
						<a href="./shop.html"> <span class="item">|</span> 小米商城</a>
					</li>
                    <li>
                        <a href="#"> <span class="item">|</span> MIUI</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> loT</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 云服务天星</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 数科</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 有品小爱开放平台</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 企业团购</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 资质证照</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 协议规则</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 下载app</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> 智能生活</a>
                    </li>
                    <li>
                        <a href="#"> <span class="item">|</span> Select Location</a>
                    </li>
                </ul>
            </div>

            <div class="nav-r">

                <form action="">
                    <ul>

                        <li>
                            <a href="./login.html"> 登录</a>
                        </li>
                        <li>
                            <a href="./index-4.html"> <span class="item">|</span> 注册</a>
                        </li>
                </form>
                <li>
                    <a href="#"> <span class="item">|</span> 消息通知</a>
                </li>
                <li>
                    <a href="#">
                        <div class="cart">
                            <i class="iconfont">&#xf0179;</i> 购物车( 0 )
                            <div class="cart-bt">
                                <a href="#">
                                    购物车中还没有商品，赶紧选购吧！
                                </a>
                            </div>
                        </div>
                    </a>
                </li>
                </ul>
            </div>

        </div>

    </div>
    <div class="big">
    <!-- 头部区域菜单 部分 -->
        <div class="content">
            <!-- 头部区域菜单 部分 -->
            <div class="menu w">
                <div class="logo">
                    <a href="#">
                        <img src="../images/mi-logo.png" alt="">
                    </a>
                </div>
                <div class="menu-t">
                    <ul>
                        <li class="xm"><a href="./index-3.html">小米手机</a>
                            <div class="menu-li-xm">
                                <ul>
                                    <li>
                                        <a href="./index-3.html">
                                        <img src="../images/xmsj.webp" alt="">
                                            <p class="p-li-t">
                                                Xiaomi Civi 3
                                            </p>
                                            <p class="p-li-f">2399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/xmsj.webp" alt="">
                                                <p class="p-li-t">
                                                    Xiaomi Civi 3
                                                </p>
                                                <p class="p-li-f">2399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/xmsj.webp" alt="">
                                                <p class="p-li-t">
                                                    Xiaomi Civi 3
                                                </p>
                                                <p class="p-li-f">2399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/xmsj.webp" alt="">
                                                <p class="p-li-t">
                                                    Xiaomi Civi 3
                                                </p>
                                                <p class="p-li-f">2399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/xmsj.webp" alt="">
                                            <p class="p-li-t">
                                                Xiaomi Civi 3
                                            </p>
                                            <p class="p-li-f">2399元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="hm"><a href="./index-3.html">Redmi红米</a>
                            <div class="menu-li-hm">
                                <ul>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/hmsj.webp" alt="">
                                            <p class="p-li-t">
                                                Redmi Note 12T Pro
                                            </p>
                                            <p class="p-li-f">1599起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/hmsj.webp" alt="">
                                        <p class="p-li-t">
                                            Redmi Note 12T Pro
                                        </p>
                                        <p class="p-li-f">1599起</p>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/hmsj.webp" alt="">
                                        <p class="p-li-t">
                                            Redmi Note 12T Pro
                                        </p>
                                        <p class="p-li-f">1599起</p>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="./index-3.html">
                                            <img src="../images/hmsj.webp" alt="">
                                        <p class="p-li-t">
                                            Redmi Note 12T Pro
                                        </p>
                                        <p class="p-li-f">1599起</p>
                                    </a>
                                    </li>
                                </ul>

                            </div>
                        </li>
                        <li><a href="#">电视笔记本</a></li>
                        <li><a href="#">家电</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">智能硬件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </div>
                <div class="serch">
                    <form action="">
                        <input type="text" name="" id="serch" placeholder="小米手机  红米">
                        <button class="btn">
                            <i class="iconfont">&#xe628;</i>
                        </button>
                    </form>
                </div>
            </div>
        </div>	
        <!-- 中间商品区域 开始 -->
        <div class="de_container">
            <!-- 面包屑导航 -->
            <div class="crumb_wrap-box">
                <div class="crumb_wrap">
                    <a href="#">小米手机系列</a> 〉 <a href="#">手机 </a> 〉 <a href="#">小米手机 </a> 〉 <a href="#">Xiaomi 13 Ultra 限量定制色</a>
                </div>
            </div>
            
            <!-- 产品介绍模块 -->
            <div class="product_intro clearfix">
                <!-- 预览区域 -->
                <div class="preview_wrap fl">
                    <div class="preview_img">
                        <div class="con pay1"><img src="../images/pay-1.png" alt=""></div>
                        <div class="con pay2"><img src="../images/pay-2.png" alt=""></div>
                        <div class="con pay3"><img src="../images/pay-3.png" alt=""></div>
                        <div class="con pay4"><img src="../images/pay-4.png" alt=""></div>
                    </div>

                    <div class="preview_list">

                        <ul class="list_item">
                            <li class="current">

                                <img src="../images/pay-1.png" data-index="0" alt="">

                            </li>
                            <li class="current">

                                <img src="../images/pay-2.png" data-index="1" alt="">

                            </li>
                            <li class="current">

                                <img src="../images/pay-3.png" data-index="2" alt="">

                            </li>
                            <li class="current">

                                <img src="../images/pay-4.png" data-index="3" alt="">

                            </li>

                        </ul>
                    </div>
                </div>

                <!-- 产品详细信息 -->
                <div class="itemInfo_wrap fr">
                    <div class="itemInfo_wrap_box">
                        <div class="sku_name">
                            Xiaomi 13 Ultra 限量定制色
                        </div>
                        <div class="news">
                            「徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式| 第二代骁龙8｜2K OLED 屏幕｜5000mAh大电量｜90W 小米澎湃有线秒充｜50W Pro 小米澎湃无线秒充」
                        </div>
                        <div class="summary">
                            <dl class="summary_price">
                                <dt>价格</dt>
                                <dd>
                                    <i class="price">￥4399.00 </i>

                                    <a href="#">降价通知</a>

                                    <div class="remark">累计评价66688</div>

                                </dd>
                            </dl>
                            <dl class="summary_promotion">
                                <dt>促销</dt>
                                <dd>
                                    <em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 >>

                                </dd>
                            </dl>
                            <dl class="summary_support">
                                <dt>支持</dt>
                                <dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
                            </dl>
                            <dl class="choose_color">
                                <dt>选择颜色</dt>
                                <dd>
                                    <a href="#" class="current">玫瑰金</a>
                                    <a href="#">金色</a>
                                    <a href="#">白色</a>
                                    <a href="#">土豪色</a>
                                </dd>
                            </dl>
                            <dl class="choose_version">
                                <dt>选择版本</dt>
                                <dd>
                                    <a href="#" class="current">公开版</a>
                                    <a href="#">移动4G</a>
                                </dd>
                            </dl>
                            <dl class="choose_type">
                                <dt>购买方式</dt>
                                <dd>
                                    <a href="#" class="current">官方标配</a>
                                    <a href="#">移动优惠购</a>
                                    <a href="#">电信优惠购</a>
                                </dd>
                            </dl>
                            <div class="choose_btns">
                                <div class="choose_amount">
                                    <input type="text" value="1">
                                    <a href="#" class="add">+</a>
                                    <a href="#" class="reduce">-</a>
                                </div>
                                <a href="#" class="addcar">加入购物车</a>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!-- 产品推荐	 -->
            <div class="product_detail clearfix">
                <div class="aside fl">
                    <div class="tab_list">
                        <ul>
                            <li class="first_tab ">相关分类</li>
                            <li class="second_tab current">推荐品牌</li>
                        </ul>
                    </div>
                    <div class="tab_con">

                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../images/lyq.jpeg" alt="">
                                    <h5>小米路由器大甩卖 走过路过 不要错过 19块9包邮到家</h5>
                                    <div class="aside_price">¥19.9</div>
                                </a>
                                <a href="#" class="as_addcar">加入购物车</a>
                            </li>


                        </ul>
                    </div>
                </div>
                <!-- 手机详情 -->
                <div class="detail fr">
                    <div class="detail_tab_list">
                        <ul>
                            <li class="current" data-index="0">商品介绍</li>
                            <li data-index="1">规格与包装</li>
                            <li data-index="2">售后保障</li>
                            <li data-index="3">商品评价（50000）</li>
                            <li data-index="4">手机社区</li>
                        </ul>
                    </div>
                    <div class="detail_tab_con">
                        <div class="item-t">
                            <div class="tab-1">
                                <ul class="item1 item_info">
                                    <li>120X 超远变焦</li>
                                    <li>120W 秒充科技</li>
                                    <li>120Hz刷新率 + 240Hz采样率</li>
                                    <li>高通骁龙旗舰处理器</li>
                                    <li>双模5G</li>
                                    <li> 10倍混合光学变焦</li>
                                    <li>OIS光学防抖+EIS数字防抖</li>
                                    <li>2000万超清前置相机</li>
                                    <li>双串蝶式石墨烯基锂离子电池</li>
                                    <li>WiFi 6 </li>
                                    <li>120W 有线秒充+50W无线秒充+10W无线反充</li>
                                    <li>多功能NFC</li>
                                    <li>红外遥控</li>
                                    <p>
                                        <a href="#" class="more">
                                            <h4>
                                                查看更多参数
                                            </h4>
                                        </a>
                                    </p>
                                    <li><img src="../images/sj-img/0.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/1.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/2.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/3.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/4.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/5.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/6.jpg" alt=""></li>
                                    <li><img src="../images/sj-img/7.jpg" alt=""></li>
                                </ul>
                                <ul class="item1 none">
                                    小米 10 包装盒曝光：8GB+128GB 起步，钛银黑新配色
                                    2020年的春天，很多手机厂商已经将新品发布会改到了线上。小米10旗舰发布会就要到来，跟此前一样，小米官方已经抢先剧透了小米10的一些重要特性，包括搭载骁龙865处理器，全系采用LPDDR5内存、WiFi
                                    6、UFS 3.0存储、1亿像素相机等。
                                    现在数码人士曝光了小米10的包装盒、新配色，在存储方面，按照雷军的说法取消了6GB内存，8GB+128GB存储起步。爆料称，小米10有钛银黑新配色。
                                    小米10包装盒曝光：8GB+128GB起步，钛银黑新配色
                                    小米10包装盒曝光：8GB+128GB起步，钛银黑新配色 从目前已掌握的信息来看，小米10系列将搭载骁龙865处理器，全系采用LPDDR5内存、WiFi 6、UFS
                                    3.0存储，后置108MP竖排四摄（消息称后摄具体配置为108MP + 48MP + 12MP + 8MP传感器）。设计方面，小米10系列均采用左上角挖孔曲面屏设计。
                                    官方介绍，此次小米10采用的1亿像素Pro大底由骁龙865
                                    ISP支持，获得了近4倍的运算速度。同时得益于AI计算摄影的加入，让用户可以随手拍出高质量手机照片。此外小米10还加入了对Flicker、HEIF、OIS等功能的支持，让照片细节表现更佳。小米10所采用的影像系统还支持120帧慢动作自拍及超级夜景模式，拥有2.35:1的电影画幅。
                                    小米10新品发布会2月13日14：00开始，届时IT之家将直播小米10新品发布会，并提供一部小米10旗舰手机作为互动奖品，欢迎关注观看。
                                </ul>
                                <ul class="item1 none">我是售后保障</ul>
                                <ul class="item1 none">
                                    首批用户表示，小米10太漂亮了，手感超出了我的预期，看起来挺好的很舒服，认为上下黑边虽然不是很完美，但是屏幕遮掩了它的不足。小米10搭载的是1080P分辨率的挖孔曲面屏，并且支持了90Hz的刷新率以及180Hz的采样率，网友称这一波曲面屏还是很优秀的，挖孔摄像头之前还担心，收到之后设置成置于刘海屏内，完全看不出来。
                                </ul>
                                <ul class="item1 none">我是手机的论坛</ul>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--关于小米-->

	<div class="big-3">
		<div class="footer">
			<div class="footer-top">
				<ul class="footer-ul">

					<li><a href="#"><i class="iconfont">&#xe614;
							</i> 预约维修服务</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe6cc;
							</i> 7无理由退货</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe645;
							</i> 15天免费换货</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xf0081;
							</i> 满69元包邮</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe609;
							</i> 1110余家售后网点</a></li>
				</ul>
			</div>
			<div class="footer-bod clearfix">
				<dl>
					<dt>
						<a href="#">
							帮助中心
						</a>
					</dt>
					<dd>
						<a href="#">
							账户管理
						</a>
					</dd>
					<dd>
						<a href="#">
							购物指南
						</a>
					</dd>
					<dd>
						<a href="#">
							订单操作
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							服务支持
						</a>
					</dt>
					<dd>
						<a href="#">
							售后政策
						</a>
					</dd>
					<dd>
						<a href="#">
							资助服务
						</a>
					</dd>
					<dd>
						<a href="#">
							相关下载
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							线下门店
						</a>
					</dt>
					<dd>
						<a href="#">
							小米之家
						</a>
					</dd>
					<dd>
						<a href="#">
							服务网点
						</a>
					</dd>
					<dd>
						<a href="#">
							授权体验店
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							关于小米
						</a>
					</dt>
					<dd>
						<a href="#">
							了解小米
						</a>
					</dd>
					<dd>
						<a href="#">
							加入小米
						</a>
					</dd>
					<dd>
						<a href="#">
							投资者联系
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							关注我们
						</a>
					</dt>
					<dd>
						<a href="#">
							新浪微博
						</a>
					</dd>
					<dd>
						<a href="#">
							官方微博
						</a>
					</dd>
					<dd>
						<a href="#">
							联系我们
						</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>

	<div class="big-4">
		<img src="../images/big-4.png" alt="">
	</div>

    <!-- 详情页内容部分	 结束-->

   
    <script>
        let allCon = document.querySelectorAll('.con');
        let show = allCon[0];
        document.querySelector('.list_item').onclick = function () {
            show.style.display = 'none';
            allCon[event.target.dataset.index].style.display = 'flex';
            show = allCon[event.target.dataset.index];
        }
        let allList = document.querySelectorAll('.item1');
        let lastShow = allList[0];
        document.querySelector('.detail_tab_list').onclick = function () {
            lastShow.style.display = 'none';
            allList[event.target.dataset.index].style.display = 'block';
            lastShow = allList[event.target.dataset.index];
        }
       
    </script>
     <script src="../js/shop.js"></script>
</body>

</html>